<template>
    <div class="container mx-auto p-4">
      <h1 class="text-2xl font-bold mb-4">医疗富文本编辑器示例</h1>
      
      <div class="flex space-x-4">
        <!-- 左侧工具栏 -->
        <div class="w-64">
          <button 
            class="w-full p-2 bg-blue-500 text-white rounded mb-2"
            @click="loadTemplate('outpatient')"
          >
            门诊病历模板
          </button>
          <button 
            class="w-full p-2 bg-blue-500 text-white rounded mb-2"
            @click="loadTemplate('inpatient')"
          >
            住院病历模板
          </button>
          <button 
            class="w-full p-2 bg-green-500 text-white rounded mb-2"
            @click="saveRecord"
          >
            保存病历
          </button>
          <button 
            class="w-full p-2 bg-red-500 text-white rounded"
            @click="printRecord"
          >
            打印病历
          </button>
        </div>
        
        <!-- 右侧编辑器 -->
        <div class="flex-1">
          <MedicalEditor 
            v-model="medicalRecord"
            :showNavigator="true"
            placeholder="请输入医疗记录..."
          />
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { useTemplateStore } from 'medical-rich-text-editor';
  
  const medicalRecord = ref([]);
  const templateStore = useTemplateStore();
  
  const loadTemplate = async (templateId: string) => {
    try {
      await templateStore.loadTemplate(templateId);
      medicalRecord.value = templateStore.currentTemplate?.content || [];
    } catch (error) {
      console.error('Failed to load template:', error);
      alert('加载模板失败，请重试');
    }
  };
  
  const saveRecord = async () => {
    try {
      // 实际保存逻辑
      console.log('保存病历:', medicalRecord.value);
      alert('病历已保存');
    } catch (error) {
      console.error('保存失败:', error);
      alert('保存失败: ' + error.message);
    }
  };
  
  const printRecord = () => {
    window.print();
  };
  </script>